<template>
	<view class="shop-list-wrap page-bg">
		<image class="shoplist-team" src="../../static/item_36.png" mode=""></image>
		<view class="goods-wrap">
			<shopList :items='items' :text='text'></shopList>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	import shopList from '../../components/shopList.vue'
	export default {
		data() {
			return{
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				searchKey: '',
				tabType: 1, // 热销：0，新品：1，价格：2
				sort: 0, // 升序为0，降序为1
				text:'上拉加载更多~',
				listType: 3, // 获取全部：0，只获取拼团：1，只获取热销：2，只获取新品：3
			}
		},
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		methods: {
			link(url) {
				this.$link(url)
			},
			getItems() {
				let {listType, pageIndex, pageSize} = this.$data
					let items = api.getRecommendList({ pageIndex, pageSize, listType},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 this.items = [...this.items, ...res.newList]
				}) 
			},
		},
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		},
		components:{
			shopList
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.shoplist-team {
		width: 100%;
		height: 345rpx;
	}

	.goods-wrap {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: -50rpx;
		position: relative;
	}

	.goods-item {
		background-color: @f;
		position: relative;
	}

	.goods-price {
		.num {
			margin-top: 30rpx;
		}
	}
</style>
